import React, { Component } from 'react'
import CardContainer from '../component/card.container'
import ReactEcharts from '../lib/echarts-for-react/src/index'
import echarts from '../lib/echarts'

class PlatformData extends Component {
  constructor(props) {
    super(props)
  }

  getChartProps(props) {
    return {
      title: {
        text: props.title,
        textStyle: {
          color: '#fff',
          fontSize: '12px'
        },
        textAlign: 'center',
        left: '50%',
        top: '30px'
      },
      tooltip: {
        show: false
      },
      toolbox: {
        show: false
      },
      grid: props.grid || {
        left: '2%',
        // top: '2%',
        right: '2%',
        bottom: '2%',
        containLabel: false
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#00b7eb'
            }
          },
          boundaryGap: false,
          data: props.data
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#00b7eb'
            }
          }
        }
      ],
      series: [
        {
          type: 'line',
          stack: '总量',
          lineStyle: {
            normal: {
              show: false,
              opacity: 0
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: props.colorStart || 'rgba(255, 204, 2, 1)'
              }, {
                offset: 1,
                color: props.colorEnd || 'rgba(255, 204, 2, 0)'
              }])
            }
          },
          data: props.value
        }
      ]
    }
  }

  render() {
    let { list1, list2 } = this.props

    let halfStyle = {
      width: '170px',
      height: '150px',
      marginTop: "-40px"
    }

    let props1 = this.getChartProps({
      title: '月生活服务量',
      data: Array.from(new Array(30), (x, i) => i),
      value: Array.from(new Array(30), (x, i) => {
        if (i < 10) {
          return Math.random() * 4 + 2
        }
        if (i > 20) {
          return 15 + Math.random() * 3
        }
        return 10 + Math.random() * 5
      })
    })

    let props2 = this.getChartProps({
      title: '月企业服务量',
      data: Array.from(new Array(30), (x, i) => i),
      value: Array.from(new Array(30), (x, i) => {
        if (i < 10) {
          return Math.random() * 5 + 2
        }
        if (i > 20) {
          return 15 + Math.random() * 3
        }
        return 10 + Math.random() * 5
      })
    })

    let props3 = this.getChartProps({
      title: '',
      colorStart: 'rgba(239, 34, 126, 1)',
      colorEnd: 'rgba(239, 34, 126, 0)',
      data: Array.from(new Array(24), (x, i) => i),
      value: [.1, .3, .2, 1, 1.8, 2, 3, 5.5, 8, 8.1, 8.5, 8.7, 9, 9.2, 9.8, 10, 9.5, 10.2, 10, 10.4, 8, 6, 4, 2, 1],
      grid: {
        top: 0,
        left: '2%',
        right: '2%',
        bottom: '2%'
      }
    })

    return (
      <CardContainer style={{height: '659px'}}>
        <span className="border-corner border-lt p-left p-top" />
        <span className="border-corner border-rt p-right p-top" />
        <span className="border-corner border-lb p-left p-bottom" />
        <span className="border-corner border-rb p-right p-bottom" />

        <h3>企业双创服务平台数据</h3>
        <div className="card-row">
          <div className="row">
            <div className="span-50">
              <h4>导师对接</h4>
              <div className="process">
                {list1.map((item, index) => {
                  return (
                    <div key={index} className="process" style={{ textAlign: 'left' }}>
                      <span className="process-company" style={{ display: 'inline-block', width: '60px', textAlign: 'center' }}>
                        {item.label}
                      </span>
                      <span className="process-bar" style={{ width: item.ratio + '%' }} />
                      <span className="process-pend">{item.pend}</span>
                    </div>
                  )
                })}
              </div>
            </div>
            <div className="span-50">
              <h4>创新券</h4>
              <div className="process">
                {list2.map((item, index) => {
                  return (
                    <div key={index} className="process" style={{ textAlign: 'left' }}>
                      <span className="process-company" style={{ display: 'inline-block', width: '60px', textAlign: 'center' }}>
                        {item.label}
                      </span>
                      <span className="process-bar" style={{ width: item.ratio + '%' }} />
                      <span className="process-pend">{item.pend}</span>
                    </div>
                  )
                })}
              </div>
            </div>
          </div>
        </div>
        <div className="card-row">
          <div className="row">
            <h3>双创服务</h3>
            <ReactEcharts
              className="span-50"
              style={halfStyle}
              option={props1}
              notMerge={true}
              lazyUpdate={true}/>
            <ReactEcharts
              className="span-50"
              style={{float: 'right', ...halfStyle}}
              option={props2}
              notMerge={true}
              lazyUpdate={true}/>
          </div>
        </div>
        <div className="row card-row">
          <h3>24H使用人数</h3>
          <ReactEcharts
            className="span-50"
            style={{ height: '144px', width: '300px' }}
            option={props3}
            notMerge={true}
            lazyUpdate={true}/>
        </div>
      </CardContainer>
    )
  }
}

PlatformData.defaultProps = {
  list1: require('../api.mock/daoshiduijie.json'),
  list2: require('../api.mock/chuangxinquan.json')
}

export default PlatformData